[日本語Alexa] APLにおけるScrollViewコンポーネントの利用　〜あらかじめ画面を読み込んで、スムーズな遷移を実現できる〜

1 はじめに

CX事業本部の平内（SIN）です。

Amazon AlexaのAPLを構成するScrollViewコンポーネントは、コンポーネントの高さを超えたコンテンツを保持し、遷移させることができます。

今回は、ScrollViewコンポーネントの使い方について、確認してみたいと思います。

2 スロール

ScrollViewコンポーネントは、子として保持するコンポーネントが、自身の高さを超える場合、垂直方向にスクロールさせることができます。

保持できる子コンポネントは、1つだけですが、Containerコンポーネントを保持つすることで、結果的に複数の保持が可能であると言えます。

下記は、100vhのScrillViewコンポネントに、300vhのImageコンポーネントを配置している例です。

{
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "ScrollView",
                "height": "100vh",
                "id": "dog",
                "items": [
                    {
                        "type": "Image",
                        "width": "100vw",
                        "height": "300vh",
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg",
                        "scale": "best-fill"
                    }
                ]
            }
        ]
    }
}

3 部分適用

ScrollViewコンポーネントは、デバイスの画面の高さに依存することなく、画面の一部で利用することも可能です。

下記は、デバイス画面の上半分（50vh）でScrollVoewを利用しています。

<br />{
    "type": "APL",
    "version": "1.1",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "item": [
                    {
                        "type": "ScrollView",
                        "height": "50vh",
                        "id": "dog",
                        "items": [
                            {
                                "type": "Image",
                                "width": "100vw",
                                "height": "300vh",
                                "source": "https://d1eju4ngjniac3.cloudfront.net/dog.jpg",
                                "scale": "best-fill"
                            }
                        ]
                    },
                    {
                        "type": "Image",
                        "width": "100vw",
                        "height": "50vh",
                        "source": "https://d1eju4ngjniac3.cloudfront.net/dog3.jpg",
                        "scale": "best-fill"
                    }
                ]
            }
        ]
    }
}

4 コマンド操作

ScrollViewコンポーネントを操作するコマンドには、下記の２つがあります。

• Scroll
• ScrollToIndex

(1) Scrollコマンド

Scrollコマンドは、ScrollViewを一定のページ数だけ前後にスクロールさせます。ここで、ページとは、ScrollViewの高さが基準となります。

指定できるパラメータは、以下のようなものがあります。

• componentId (対象となるンポーネントID）
• distance (スクロールするページ数、デフォルトは1で、極端に大きな数を指定することで、ゆっくりスクロールさせることができます)

なお、スクロールは、ユーザーが画面にタッチしたり、別のコマンドを受信すると停止します。

参考:Scrollコマンド

下記のコードは、それぞれ、画面上部に配置されたScrollコンポーネントで、トップに スクロールさせたものと、１ページにスクロールさせている例です。

.addDirective({
    type : 'Alexa.Presentation.APL.ExecuteCommands',
    token: h.requestEnvelope.context.System.apiAccessToken!,
    commands: [
        {
            type: "Scroll",
            componentId: "dog",
            distance   : 0
        }
    ]
})  

.addDirective({
    type : 'Alexa.Presentation.APL.ExecuteCommands',
    token: h.requestEnvelope.context.System.apiAccessToken!,
    commands: [
        {
            type: "Scroll",
            componentId: "dog",
            distance   : 1
        }
    ]
})  

※2019/7/16現在、開発者コンソールのテストでは、Scrollコマンドの動作を確認する事はできませんでした。

参考:Scrollコマンド

(2) ScrollToIndexコマンド

ScrollViewコンポーネントで、特定のコンポーネントを指定してスクロールさせます。

指定できるパラメータは、以下のようなものがあります。

• componentId (対象となるンポーネントID）
• index 指定するインデックス
• align 項目の配置
  • first 指定した項目が一番上に配置される
  • center 指定した項目が中央に配置される
  • last 指定した項目が一番下に配置される
  • visible （デフォルト）指定した項目全体を表示

ScrollToIndexで、ScrollViewコンポーネントを操作する場合、ScrollViewコンポーネントの中に、複数のコンポーネントが存在する必要があります。

下記の例では、ScrollViewコンポーネントの中に、Containerコンポーネントを置き、その中に、Imageコンポーネントを3つ並べています。

"mainTemplate": {
    "parameters": [
        "payload"
    ],
    "items": [
        {
            "type": "Container",
            "item": [
                {
                    "type": "ScrollView",
                    "height": "50vh",
                    "items": [
                        {
                            "type": "Container",
                            "id": "dogs",
                            "items": [
                                {
                                    "type": "Image",
                                    "width": "100vw",
                                    "height": "100vh",
                                    "source": "https://d1eju4ngjniac3.cloudfront.net/dog2.jpg",
                                    "scale": "fill"
                                },
                                {
                                    "type": "Image",
                                    "width": "100vw",
                                    "height": "100vh",
                                    "source": "https://d1eju4ngjniac3.cloudfront.net/dog3.jpg",
                                    "scale": "fill"
                                },
                                {
                                    "type": "Image",
                                    "width": "100vw",
                                    "height": "100vh",
                                    "source": "https://d1eju4ngjniac3.cloudfront.net/dog4.jpg",
                                    "scale": "fill"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Image",
                    "width": "100vw",
                    "height": "50vh",
                    "source": "https://d1eju4ngjniac3.cloudfront.net/dog3.jpg",
                    "scale": "best-fill"
                }
            ]
        }
    ]
}

この場合、下記のコマンドで、2つ目の画像までスクロールします。なお、ここでcomponentIdに指定するのは、ScrollViewではなく、その中に含まれるContainerのIDであることに注意が必要です。

.addDirective({
    type : 'Alexa.Presentation.APL.ExecuteCommands',
    token: h.requestEnvelope.context.System.apiAccessToken!,
    commands: [
        {
            "type": "ScrollToIndex",
            "componentId": "dogs",
            "index": 2,
            "align": "center"
            }
    ]
})  

参考:ScrollToIndexコマンド

5 最後に

今回は、ScrollViewコンポーネントについて確認してみました。

画像等の表示には、そのダウンロードに少し時間が必要なため、スキルの動作と完全に一致せず、少し遅れて表示されたりすることがあります。

ScrollViewコンポーネントは、画面に表示しきれないコンテンツも予め読み込むことが可能ですので、コマンドで画面を推移させれば、スムーズが遷移が実現可能かも知れません。